<template>
	<view class="page">
		<view class="p-2">
			<view class="bt-block">
				<bg-cell2 label="银行卡">
					<template slot="value">
						<u--input v-model="postData.bankCardNo" border='none' inputAlign='right'></u--input>
						<text @click="scanBankCard" class="font-1 font-red line-btn">扫码识别</text>
					</template>
				</bg-cell2>
				<bg-cell2 label="开户行">
					<template slot="value">
						<u--input v-model="postData.bankName" border="none" inputAlign='right'></u--input>
					</template>
				</bg-cell2>
				<bg-cell2 label="联系方式">
					<template slot="value">
						<u--input v-model="postData.phone" border="none" inputAlign='right'></u--input>
					</template>
				</bg-cell2>
				<bg-cell2 label="获取验证码" :border="false">
					<template slot="value">
						<u--input v-model="postData.code" border="none" inputAlign='right'></u--input>
						<text class="font-1 font-red line-btn" @click="startCode">{{tips}}</text>
					</template>
				</bg-cell2>
				<u-code end-text="获取验证码" :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
				
			</view>
		</view>
		<view class="bt-footer">
			<bg-btn @click="saveData">保存</bg-btn>
		</view>
	</view>
</template>

<script>
	import { getCode } from '@/api/login'
	import { bankAuth } from '@/api/system/user';
	import { shotUpload } from '../../../utils/upload'
	
	export default {
		data() {
			return {
				tips:'',
				seconds:60,
				postData:{
					 "phone": "",
					  "code": "",
					  "bankCardNo": "",
					  "bankName": ""
				}
			}
		},
		methods: {
			startCode(text){
				if(this.$refs.uCode.canGetCode) {
					if(!uni.$u.test.mobile(this.postData.phone)){
						uni.$u.toast('请输入正确的手机号');
						return false
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					getCode(this.postData.phone).then(res=>{
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(e){
				this.tips = e
			},
			scanBankCard(){
				shotUpload().then(res=>{
					this.postData.bankName = res.data.bankName
					this.postData.bankCardNo = res.data.cardNumber
				})
			},
			saveData(){
				if(!this.postData.bankCardNo){
					uni.$u.toast('请输入银行卡');
					return false
				}
				if(!this.postData.bankName){
					uni.$u.toast('请输入开户行');
					return false
				}
				if(!this.postData.phone){
					uni.$u.toast('请输入联系方式');
					return false
				}
				if(!this.postData.code){
					uni.$u.toast('请输入验证码');
					return false
				}
				bankAuth(this.postData).then(res=>{
					uni.$emit("refresh-card", true)
					this.$tab.navigateBackDelay()
				})
			}
		}
	}
</script>

<style>
.line-btn {
	margin-left:8rpx;
	line-height: 48rpx;
}
</style>
